<template>
  <svg
    aria-hidden="true"
    class="svg-icon"
    :style="{
      fontSize: props.size,
    }"
  >
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'SvgIcon',
  });
</script>

<script setup lang="ts">
  import { computed } from 'vue';
  const props = withDefaults(
    defineProps<{
      prefix?: string;
      name: string;
      color?: string;
      size?: string;
    }>(),
    {
      prefix: 'icon',
      color: 'inherit',
      size: '14px',
    },
  );
  const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    outline: none;
  }
</style>
